<template>
    <div class="changeArea" v-show="$store.state.radar.radarUI">
        <h3 class="show">雷达区域:</h3>
        <div class="refresh" @click="updateArea"></div>
        <!--更改雷达区域div-->
        <div class="changeTable">
            <table>
                <tr>
                    <td>
                        <h4>x1:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.x1" ref="x1"></td>
                    <td>
                        <h4>y1:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.y1" ref="y1"></td>
                    <td>
                        <h4>x2:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.x2" ref="x2"></td>
                    <td>
                        <h4>y2:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.y2" ref="y2"></td>
                </tr>
                <tr>
                    <td>
                        <h4>x3:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.x3" ref="x3"></td>
                    <td>
                        <h4>y3:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.y3" ref="y3"></td>
                    <td>
                        <h4>x4:</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.x4" ref="x4"></td>
                    <td>
                        <h4>y4</h4>
                    </td>
                    <td><input type="text" :value="$store.state.radar.areaPosition.y4" ref="y4"></td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>

    import addQuadrilateral from 'assets/js/CesiumFun/CesiumPubFun/addQuadrilateral'  // 添加一个四边形

    export default {
        props: {
            viewer: undefined
        },
        name: '',
        data() {
            return {

            }
        },
        components: {

        },
        methods: {
            // 更新雷达区域（新的4个点坐标）
            updateArea() {
                var radar = this.$store.getters.searchRadar;                                              // 当前右键的雷达
                var cartographic = Cesium.Cartographic.fromCartesian(radar.asset.extras[0].Position);     // 雷达的位置（雷达范围中心点）
                var area = {                // 雷达的4个点位置
                    x1: this.$refs.x1.value,
                    y1: this.$refs.y1.value,
                    x2: this.$refs.x2.value,
                    y2: this.$refs.y2.value,
                    x3: this.$refs.x3.value,
                    y3: this.$refs.y3.value,
                    x4: this.$refs.x4.value,
                    y4: this.$refs.y4.value,
                }
                var newarea = addQuadrilateral(this.viewer, cartographic, area);                          // 新的雷达范围
                var index = this.searchIndex(area);
                this.$store.commit('updateArea', { areaIndex: index, newArea: newarea });
            },

            // 根据id查找当前点击的雷达在数组中的位置
            searchIndex(area) {
                var i;
                var collection = this.$store.state.radar.radarCollection;
                for (let i = 0; i < collection.length; i++) {
                    if (collection[i].asset.extras[0].Id == this.$store.state.radar.radarId) {
                        this.$store.state.radar.radarCollection[i].asset.extras[1] = area;
                        return i
                    }
                }
            }

        }
    }
</script>

<style scpoed>
    @import '~assets/css/Cesium/radar/changeArea.css';
</style>